<template>
  <s-layout title="云上课堂" navbar="normal" :bgStyles="{ color: '#f5f5f5' }">
    <!-- Search Bar -->
    <view class="search-bar">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input
          v-model="state.searchKeyword"
          class="search-input"
          placeholder="搜索课程名称或讲师"
          @confirm="handleSearch"
        />
      </view>
      <view class="search-btn" @tap="handleSearch">搜索</view>
    </view>

    <!-- Filter Tabs -->
    <su-sticky bgColor="#f5f5f5">
      <view class="filter-tabs">
        <view
          v-for="(tab, index) in state.tabs"
          :key="index"
          :class="['filter-tab', { active: state.activeTab === index }]"
          @tap="handleTabChange(index)"
        >
          {{ tab }}
        </view>
      </view>
    </su-sticky>

    <!-- Featured Course Section -->
    <view class="featured-section">
      <view class="featured-header">
        <text>🔥</text>
        <text class="featured-title">本周推荐</text>
      </view>
      <view class="featured-course" @tap="handleCourseClick(state.featuredCourse)">
        <view class="course-badge">热门</view>
        <view class="featured-content">
          <view class="featured-cover">📚</view>
          <view class="featured-info">
            <text class="featured-course-title">{{ state.featuredCourse.title }}</text>
            <text class="featured-instructor">{{ state.featuredCourse.instructor }}</text>
            <view class="featured-stats">
              <text>🎥 {{ state.featuredCourse.hours }}课时</text>
              <text>👥 {{ state.featuredCourse.students }}人学习</text>
              <text>⭐ {{ state.featuredCourse.rating }}分</text>
            </view>
            <view class="featured-progress">
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: state.featuredCourse.progress + '%' }">
                  {{ state.featuredCourse.progress }}%
                </view>
              </view>
              <button class="continue-btn" @tap.stop="handleContinueLearn">继续学习</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Course List -->
    <view class="course-list">
      <view
        v-for="course in state.filteredCourses"
        :key="course.id"
        class="course-card"
        @tap="handleCourseClick(course)"
      >
        <view class="course-header">
          <view class="course-meta">
            <view :class="['course-level', `level-${course.level}`]">
              {{ course.levelText }}
            </view>
          </view>
          <text class="course-duration">{{ course.hours }}课时</text>
        </view>

        <view class="course-content">
          <view class="course-item">
            <view class="course-cover">{{ course.icon }}</view>
            <view class="course-info">
              <text class="course-title">{{ course.title }}</text>
              <text class="course-instructor">{{ course.instructor }}</text>
              <view class="course-stats">
                <text>👥 {{ course.students }}人学习</text>
                <text>📅 {{ course.updateDate }}更新</text>
              </view>
              <text class="course-desc">{{ course.description }}</text>
            </view>
          </view>
        </view>

        <view class="course-footer">
          <view class="course-rating">
            <text class="rating-stars">{{ getStarString(course.rating) }}</text>
            <text>{{ course.rating }}分 ({{ course.reviews }}评价)</text>
          </view>
          <button class="start-btn" @tap.stop="handleStartLearn(course)">开始学习</button>
        </view>
      </view>
    </view>

    <!-- Load More -->
    <view class="load-more">
      <button class="load-more-btn" @tap="handleLoadMore">加载更多课程</button>
    </view>
  </s-layout>
</template>

<script setup>
import { reactive, computed } from 'vue'
import sheep from '@/sheep'

const state = reactive({
  searchKeyword: '',
  activeTab: 0,
  tabs: ['全部', '志愿服务', '安全知识', '文化素养', '实用技能'],
  featuredCourse: {
    id: 0,
    title: '志愿服务礼仪与沟通技巧',
    instructor: '张教授 · 资深志愿服务培训师',
    hours: 12,
    students: 1234,
    rating: 4.8,
    progress: 65,
    category: '志愿服务'
  },
  courseList: [
    {
      id: 1,
      title: '应急救护基础知识',
      instructor: '李医生 · 急救培训专家',
      icon: '🏥',
      level: 'beginner',
      levelText: '初级',
      hours: 8,
      students: 856,
      updateDate: '2024-01-15',
      description: '学习基础急救知识，掌握心肺复苏、外伤包扎等技能，为志愿服务提供安全保障，保护自己和他人的生命安全。',
      rating: 4.9,
      reviews: 128,
      category: '安全知识'
    },
    {
      id: 2,
      title: '环保知识与绿色生活',
      instructor: '王专家 · 环保公益讲师',
      icon: '🌱',
      level: 'beginner',
      levelText: '初级',
      hours: 6,
      students: 623,
      updateDate: '2024-01-12',
      description: '了解环保理念，学习垃圾分类、节能减排等实用知识，推广绿色生活方式，共同建设美丽社区。',
      rating: 4.7,
      reviews: 89,
      category: '实用技能'
    },
    {
      id: 3,
      title: '社区文化活动组织与策划',
      instructor: '陈老师 · 文化活动策划师',
      icon: '🎭',
      level: 'intermediate',
      levelText: '中级',
      hours: 10,
      students: 445,
      updateDate: '2024-01-10',
      description: '学习活动策划流程，掌握文艺演出、文化展览等活动的组织技巧，丰富社区文化生活。',
      rating: 4.6,
      reviews: 67,
      category: '文化素养'
    },
    {
      id: 4,
      title: '社区心理疏导与情感支持',
      instructor: '刘心理师 · 心理咨询专家',
      icon: '👥',
      level: 'intermediate',
      levelText: '中级',
      hours: 15,
      students: 312,
      updateDate: '2024-01-08',
      description: '学习基础心理学知识，掌握倾听技巧和情感支持方法，为社区居民提供心理关怀服务。',
      rating: 4.8,
      reviews: 45,
      category: '志愿服务'
    },
    {
      id: 5,
      title: '志愿团队管理与项目运营',
      instructor: '马主任 · 志愿服务管理专家',
      icon: '📊',
      level: 'advanced',
      levelText: '高级',
      hours: 20,
      students: 189,
      updateDate: '2024-01-05',
      description: '深入学习团队管理、项目策划、资源调配等高级技能，培养志愿服务骨干和组织者。',
      rating: 4.9,
      reviews: 28,
      category: '志愿服务'
    }
  ]
})

const filteredCourses = computed(() => {
  let result = state.courseList

  // Filter by tab
  if (state.activeTab > 0) {
    const category = state.tabs[state.activeTab]
    result = result.filter((c) => c.category === category)
  }

  // Filter by search
  if (state.searchKeyword) {
    result = result.filter(
      (c) =>
        c.title.includes(state.searchKeyword) || c.instructor.includes(state.searchKeyword)
    )
  }

  return result
})

state.filteredCourses = filteredCourses

const getStarString = (rating) => {
  const fullStars = Math.floor(rating)
  return '⭐'.repeat(fullStars)
}

const handleSearch = () => {
  console.log('Searching:', state.searchKeyword)
}

const handleTabChange = (index) => {
  state.activeTab = index
}

const handleCourseClick = (course) => {
  sheep.$router.go(`/pages/cmt/course-detail?id=${course.id}`)
}

const handleStartLearn = (course) => {
  sheep.$router.go(`/pages/cmt/course-detail?id=${course.id}`)
}

const handleContinueLearn = () => {
  sheep.$router.go(`/pages/cmt/course-detail?id=${state.featuredCourse.id}`)
}

const handleLoadMore = () => {
  uni.showToast({
    title: '加载更多课程中...',
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.search-bar {
  background: white;
  margin: 30rpx;
  border-radius: 40rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12rpx;

    .search-icon {
      font-size: 28rpx;
      color: #ff6b00;
    }

    .search-input {
      flex: 1;
      font-size: 28rpx;
    }
  }

  .search-btn {
    padding: 12rpx 24rpx;
    background: linear-gradient(135deg, #ff6b00, #ffa726);
    color: white;
    border-radius: 30rpx;
    font-size: 32rpx;
    line-height: 1;
  }
}

.filter-tabs {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 32rpx;
  padding: 10rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 10rpx;

  .filter-tab {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 24rpx;
    font-size: 26rpx;
    color: #666;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      color: white;
      font-weight: bold;
    }
  }
}

.featured-section {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .featured-header {
    padding: 30rpx 40rpx;
    border-bottom: 2rpx solid #f0f2f5;
    display: flex;
    align-items: center;
    gap: 16rpx;

    .featured-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .featured-course {
    padding: 40rpx;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    position: relative;

    .course-badge {
      position: absolute;
      top: 30rpx;
      right: 30rpx;
      background: #ff4757;
      color: white;
      padding: 8rpx 16rpx;
      border-radius: 24rpx;
      font-size: 20rpx;
      font-weight: bold;
    }

    .featured-content {
      display: flex;
      gap: 30rpx;
      align-items: flex-start;

      .featured-cover {
        width: 160rpx;
        height: 160rpx;
        background: linear-gradient(135deg, #ff6b00, #ffa726);
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 64rpx;
        flex-shrink: 0;
      }

      .featured-info {
        flex: 1;

        .featured-course-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 16rpx;
          line-height: 1.3;
          display: block;
        }

        .featured-instructor {
          font-size: 26rpx;
          color: #ff6b00;
          font-weight: bold;
          margin-bottom: 12rpx;
          display: block;
        }

        .featured-stats {
          display: flex;
          gap: 20rpx;
          font-size: 22rpx;
          color: #666;
          margin-bottom: 24rpx;
          flex-wrap: nowrap;
        }

        .featured-progress {
          display: flex;
          align-items: center;
          gap: 20rpx;

          .progress-bar {
            flex: 1;
            height: 16rpx;
            background: #e9ecef;
            border-radius: 8rpx;
            overflow: hidden;

            .progress-fill {
              height: 100%;
              background: linear-gradient(90deg, #ff6b00, #ffa726);
              display: flex;
              align-items: center;
              justify-content: flex-end;
              padding-right: 12rpx;
              color: white;
              font-size: 18rpx;
              font-weight: bold;
            }
          }

          .continue-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 16rpx 32rpx;
            border-radius: 32rpx;
            font-size: 24rpx;
            line-height: 1;
            flex-shrink: 0;
            min-width: 144rpx;
            text-align: center;

            &::after {
              border: none;
            }
          }
        }
      }
    }
  }
}

.course-list {
  margin: 0 30rpx 30rpx;

  .course-card {
    background: white;
    border-radius: 32rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    overflow: hidden;

    .course-header {
      padding: 30rpx 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .course-meta {
        .course-level {
          padding: 8rpx 16rpx;
          border-radius: 16rpx;
          font-size: 20rpx;
          font-weight: bold;
          color: white;

          &.level-beginner {
            background: #52c41a;
          }

          &.level-intermediate {
            background: #fa8c16;
          }

          &.level-advanced {
            background: #f5222d;
          }
        }
      }

      .course-duration {
        font-size: 22rpx;
        color: #999;
      }
    }

    .course-content {
      padding: 0 40rpx 30rpx;

      .course-item {
        display: flex;
        gap: 30rpx;
        align-items: flex-start;

        .course-cover {
          width: 120rpx;
          height: 120rpx;
          background: linear-gradient(135deg, #ff6b00, #ffa726);
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 48rpx;
          flex-shrink: 0;
        }

        .course-info {
          flex: 1;

          .course-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 12rpx;
            line-height: 1.4;
            display: block;
          }

          .course-instructor {
            font-size: 24rpx;
            color: #ff6b00;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }

          .course-stats {
            display: flex;
            gap: 24rpx;
            font-size: 22rpx;
            color: #999;
            margin-bottom: 16rpx;
          }

          .course-desc {
            font-size: 24rpx;
            color: #666;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }
    }

    .course-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f8f9fa;
      padding: 24rpx 40rpx;
      font-size: 24rpx;

      .course-rating {
        display: flex;
        align-items: center;
        gap: 16rpx;
        color: #666;
        flex: 1;

        .rating-stars {
          color: #ffa940;
        }
      }

      .start-btn {
        background: linear-gradient(135deg, #ff6b00, #ffa726);
        color: white;
        border: none;
        padding: 16rpx 32rpx;
        border-radius: 32rpx;
        font-size: 24rpx;
        line-height: 1;
        flex-shrink: 0;
        min-width: 144rpx;
        text-align: center;
        margin-left: auto;

        &::after {
          border: none;
        }
      }
    }
  }
}

.load-more {
  text-align: center;
  padding: 40rpx;

  .load-more-btn {
    background: linear-gradient(135deg, #ff6b00, #ffa726);
    color: white;
    border: none;
    padding: 20rpx 50rpx;
    border-radius: 40rpx;
    font-size: 26rpx;
    line-height: 1;
    min-width: 200rpx;

    &::after {
      border: none;
    }
  }
}
</style>
